<template>
    <div>
        <div class="ls-dialog__trigger" @click="onTrigger">
            <!-- 触发弹窗 -->
            <slot name="trigger"></slot>
        </div>
        <el-dialog
            coustom-class="ls-dialog__content"
            :title="flag == true ? '发货' : '物流查询'"
            :visible="visible"
            width="70vw"
            :top="top"
            :modal-append-to-body="false"
            center
            :before-close="close"
            :close-on-click-modal="false"
        >
            <div style="height: 75vh; overflow-x: hidden" v-loading="orderData.length == 0">
                <!-- 商品信息 -->
                <div>
                    <div class="nr weight-500 m-b-20">商品信息</div>

                    <el-table
                        :data="orderData.order_goods"
                        ref="paneTable1"
                        style="width: 100%"
                        size="mini"
                        :summary-method="getSummaries"
                        :show-summary="true"
                    >
                        <el-table-column label="序号" prop="id" width="75"></el-table-column>
                        <el-table-column label="商品信息" min-width="300">
                            <template slot-scope="scope">
                                <div class="flex m-t-10">
                                    <el-image
                                        :src="scope.row.goods_image"
                                        style="width: 58px; height: 58px"
                                        class="flex-none"
                                    ></el-image>
                                    <div class="m-l-8 flex-1">
                                        <div class="line-2">{{ scope.row.goods_name }}</div>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label min-width="150"></el-table-column>
                        <el-table-column prop="spec_value_str" label="商品规格" min-width="150"></el-table-column>
                        <el-table-column prop="goods_price" label="商品价格" min-width="80">
                            <template slot-scope="scope">¥{{ scope.row.goods_price }}</template>
                        </el-table-column>
                        <el-table-column prop="goods_num" label="购买数量" min-width="120"></el-table-column>
                        <el-table-column label="优惠金额" prop="discount_price" min-width="80">
                            <template slot-scope="scope">¥{{ scope.row.discount_price }}</template>
                        </el-table-column>
                        <el-table-column label="商品实付总额" prop="total_pay_price" min-width="180">
                            <template slot-scope="scope">¥{{ scope.row.total_pay_price }}</template>
                        </el-table-column>
                    </el-table>
                </div>

                <!-- 收货信息 -->
                <div class="m-t-30" v-if="flag == true">
                    <div class="nr weight-500 m-b-20">收货信息</div>

                    <div class="flex">
                        <div class="m-r-24">收货人： {{ orderData.contact }}</div>
                        <div class="m-r-24">收货人手机号码： {{ orderData.mobile }}</div>
                        <div class="m-r-24">收货人地址： {{ orderData.delivery_address }}</div>
                    </div>
                </div>

                <!-- 物流配送 -->
                <div class="m-t-30" v-if="flag == true">
                    <!-- 虚拟订单 -->
                    <template v-if="orderType == 4">
                        <div class="nr weight-500 m-b-20">商品发货</div>
                        <el-form ref="form" :model="form" label-width="80px">
                            <el-form-item label="发货内容">
                                <el-input
                                    class="m-t-10"
                                    style="width: 530px"
                                    type="textarea"
                                    :rows="7"
                                    placeholder="请输入内容"
                                    v-model="form.delivery_content"
                                    @change="handleChange"
                                ></el-input>
                            </el-form-item>
                        </el-form>
                    </template>
                    <!-- 非虚拟订单 -->
                    <template v-else>
                        <div class="nr weight-500 m-b-20">物流配送</div>
                        <div class="flex">
                            <el-form ref="form" :model="form" label-width="80px">
                                <el-form-item label="配送方式">
                                    <el-radio v-model="form.send_type" :label="1">需要物流</el-radio>
                                    <el-radio v-model="form.send_type" :label="2">无需物流</el-radio>
                                </el-form-item>

                                <el-form-item label="物流公司" v-if="form.send_type == 1">
                                    <el-input
                                        style="width: 530px"
                                        placeholder="请输入快递单号"
                                        v-model="form.invoice_no"
                                    >
                                        <template slot="prepend">
                                            <div>
                                                <el-select
                                                    style="width: 120px"
                                                    v-model="form.express_id"
                                                    placeholder="请选择"
                                                >
                                                    <el-option
                                                        :label="item.name"
                                                        :value="item.id"
                                                        v-for="(
                                                        item, index
                                                    ) in orderData.express"
                                                        :key="index"
                                                    ></el-option>
                                                </el-select>
                                            </div>
                                        </template>
                                    </el-input>
                                </el-form-item>

                                <el-form-item label="发货备注">
                                    <el-input
                                        class="m-t-10"
                                        style="width: 530px"
                                        type="textarea"
                                        :rows="7"
                                        placeholder="请输入内容"
                                        v-model="form.remark"
                                    ></el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                    </template>
                </div>

                <!-- 物流信息 -->
                <div class="m-t-30" v-if="flag == false">
                    <div class="nr weight-500 m-b-20">物流信息</div>

                    <div class="flex">
                        <div class="m-r-24">发货时间： {{ orderData.express_time }}</div>
                        <div class="m-r-24">物流公司： {{ orderData.express_name || '无' }}</div>
                        <div class="m-r-24">物流单号 {{ orderData.invoice_no || '无' }}</div>
                    </div>
                </div>

                <!-- 物流轨迹 -->
                <div class="m-t-30" v-if="flag == false">
                    <div class="nr weight-500 m-b-20">物流轨迹</div>

                    <div v-if="orderData.send_type == 1">
                        <el-table
                            :data="orderData.traces"
                            ref="paneTable"
                            style="width: 100%"
                            size="mini"
                        >
                            <el-table-column label="日期" prop="0" min-width="205"></el-table-column>
                            <el-table-column label="轨迹" prop="1" min-width="405"></el-table-column>
                        </el-table>
                    </div>
                    <div v-else class="nr weight-500 m-t-60 flex row-center">无需物流</div>
                </div>
            </div>

            <!-- 底部弹窗页脚 -->
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="handleEvent('cancel')">取消</el-button>
                <el-button
                    size="small"
                    @click="handleEvent('confirm')"
                    v-if="flag == true"
                    type="primary"
                >发货</el-button>
                <el-button size="small" @click="handleEvent('cancel')" v-else type="primary">确认</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import {
    apiOrderDeliveryInfo,
    apiOrderLogistics,
    apiOrderDelivery
} from '@/api/order/order'
@Component
export default class OrderLogistics extends Vue {
    @Prop({ default: '5vh' }) top!: string | number //弹窗的距离顶部位置
    @Prop({ default: '0' }) id!: string | number //订单ID
    @Prop({ default: true }) flag!: Boolean //是发货还是物流查询 true为发货 ，false为物流查询
    @Prop({ default: '' }) isShow!: string
    @Prop() orderType: number | undefined
    /** S Data **/
    visible = false //是否

    fullscreenLoading = false //加载方式

    // 物流订单信息
    orderData: any = {
        traces: {}
    }

    // 发货表单
    form: any = {
        send_type: 1, //	是	int	配送方式:1-快递配送;2-无需快递
        express_id: '', //	是(配送方式为1时必选)	int	订单id
        invoice_no: '', //	是(配送方式为1时必选)	int	订单id
        remark: '', //	否	varchar	发货备注
        delivery_content: ''  //发货内容
    }

    /** E Data **/

    /** S Method **/

    // 获取订单信息 flag 为 true的时候执行
    getOrderDeliveryInfo() {
        apiOrderDeliveryInfo({ id: this.id }).then(res => {
            this.orderData = res
            this.form.delivery_content = res.delivery_content
            this.fullscreenLoading = false
        })
    }

    // 获取物流查询
    getOrderLogistics() {
        apiOrderLogistics({ id: this.id }).then(res => {
            this.orderData = res
            this.fullscreenLoading = false
        })
    }

    // 发货
    orderDelivery() {
        
        if(this.orderData.order_type==4) {
            this.form = {
                delivery_content: this.form.delivery_content
            }
        }
        apiOrderDelivery({
            id: this.id,
            ...this.form
        }).then(res => {
            this.$emit('update', '')

            // this.getOrderLogistics()
        })
    }

    // 商品信息的底部结算信息
    getSummaries(param: any) {
        const { columns, data } = param
        const sums: any = []
        columns.forEach((column: any, index: any) => {
            if (index === 0) {
                sums[2] = '总价'
                return
            }
            const values = data.map((item: any) =>
                Number(item[column.property])
            )
            if (!values.every((value: any) => isNaN(value))) {
                if (index == 4) {
                    return
                }
                sums[index] = values.reduce((prev: any, curr: any) => {
                    const value = Number(curr)
                    if (!isNaN(value)) {
                        return prev + curr
                    }
                    return prev
                }, 0)
                if (index !== 5 && index !== 3) {
                    sums[index] = '¥' + sums[index].toFixed(2)
                }
            }
        })

        return sums
    }

    // 点击取消
    handleEvent(type: 'cancel' | 'confirm') {
        if (type === 'cancel') {
            this.close()
        }
        if (type === 'confirm') {
            if (this.flag) {
                // 虚拟发货
                if (this.orderData.order_type == 4) {
                    if (this.form.delivery_content.trim() == '') {
                        return this.$message.error('请输入发货内容')
                    }
                } else {
                    if (this.form.send_type == 1) {
                        if (this.form.express_id == '') {
                            return this.$message.error('请选择快递公司')
                        }
                        if (this.form.invoice_no == '') {
                            return this.$message.error('请填写快递单号')
                        }
                    }
                }

            }

            this.orderDelivery()
            this.close()
        }
    }

    // 打开弹窗
    onTrigger() {
        this.fullscreenLoading = true
        this.flag == true
            ? this.getOrderDeliveryInfo()
            : this.getOrderLogistics()
        this.visible = true
    }

    // 关闭弹窗
    close() {
        this.visible = false
    }

    handleChange(val: string) {
       this.form.delivery_content = val.trim()
    }
    // @Watch('isShow')
    // changeShow(value: any) {
    //
    // }
}
</script>

<style lang="scss">
.header-input {
    width: 220px !important;
}
</style>
